<template>
  <div class="injector-level-two">
    <div class="level-indicator">层级 2</div>
    <p>从顶层Provider直接接收的主题: <span :style="{ color: injectedThemeColor }">{{ injectedTheme }}</span></p>
    <p>共享计数器值: <strong>{{ injectedCounter }}</strong></p>
    
    <!-- 最深层级组件 -->
    <InjectorLevelThree />
  </div>
</template>

<script setup>
import { inject } from 'vue'
import InjectorLevelThree from './InjectorLevelThree.vue'

// 直接从顶层Provider注入数据，跳过中间层级
const injectedTheme = inject('theme')
const injectedThemeColor = inject('themeColor')
const injectedCounter = inject('counter')
</script>

<style scoped>
.injector-level-two {
  padding: 15px;
  margin: 15px 0 15px 20px;
  background-color: #e8f4f8;
  border-radius: 6px;
  border-left: 3px solid #e74c3c;
  position: relative;
}

.level-indicator {
  position: absolute;
  top: -10px;
  left: -10px;
  background-color: #e74c3c;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
}
</style>